<template>
  <v-chart :options="lineOption"/>
</template>

<style>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  // 导入绘图组件 需要安装 vue-echart echart
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/grid'
  import 'echarts/lib/component/toolbox'

  export default {
    components: {
      'v-chart': ECharts
    },
    props: ['echartData'],
    data () {
         // x坐标描述
         // let xChick = ['1', '2', '3', '4', '5', '6', '7']
         //   // 真实值数据
         // let dataX1 = [120, 132, 101, 134, 90, 230, 210]
         // // 预测值数据
         // let dataX2 = [220, 182, 191, 234, 290, 330, 710]
        let xChick = this.echartData.xChick
        let dataX1 = this.echartData.dataX1
        let dataX2 = this.echartData.dataX2
      return {
        lineOption: {
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['真实值', '预测值']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xChick
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '真实值',
              type: 'line',
              stack: '总量',
              data: dataX1
            },
            {
              name: '预测值',
              type: 'line',
              stack: '总量',
              data: dataX2
            }
          ]

        }
      }
    }
  }
</script>
